<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="tabReturn">
				<img src="../../assets/images/left.png"/>
			</div>
			<p>发表帖子</p>
			<span @click="handleSubmit">发表</span>
		</div>
		<div class="publish-center">
			<div class="publish-title">
				<h1>标题</h1>
				<input type="text" v-model="title" maxlength="15" placeholder="请输入标题" autocomplete="off"/>
				<span>{{title.length}}/15</span>
			</div>
			<div class="publish-text">				
				<textarea placeholder="随便说点什么....." v-model="texts" maxlength="300" autocomplete="off"></textarea>
				<span>{{texts.length}}/300</span>
			</div>
			<div class="publish-upload">
				<ul v-if="imgs!=[]">	
					<li v-for="(pic,index) in imgs">
						<span @click="onResmove(index)">X</span>
						<img :src="pic"/>
					</li>	
				</ul>
				<!--上传-->
				<div class="uploader" v-if="imgs.length>=4?false:true">
					<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
					  <img src="../../assets/images/upload.png"/>
					</van-uploader>
				</div>
			</div>
			<div class="publish-radio">
				 <div class="radio">
				 		<div @click="handleRale(1)">
				 			<img :src="ChoiceIndex==1?sels:upchenk"/>
				 			<span>实名发布</span>
				 		</div>
				 		<div @click="handleAnonymous(2)">
				 			<img :src="ChoiceIndex==2?sels:upchenk"/>
				 			<span>匿名发布</span>
				 		</div>
				 </div>     
			</div>
		</div>
		<div class="publish-footer" v-if="ChoiceIndex == 1?true:false" @click="tabPlate">
			<div>
				<img src="../../assets/images/publish/publish-p.png"/>
				<p>{{value}}</p>
			</div>
			<img src="../../assets/images/mine-icon.png"/>
		</div>
		<!--选择模块-->
		<div class="publisModular"v-if="platCheck">
			<div class="publish-top">
				<div class="left-icon" @click="onClickReturn">
					<img src="../../assets/images/left.png"/>
				</div>
				<p>选择板块</p>
				<span @click="onDetermine">确定</span>
			</div>
			<div class="plate-con">
				<p>请选择板块</p>
				<ul>
					<li 
						v-for="(item,index) in plateArr" 
						@click="handlePlate(index,item.cate_id,item.cate_name)" 
						:class="index == platIndex ? 'active' : ''"
					>{{item.cate_name}}</li>
				</ul>
			</div>	
		</div>
	</div>
</template>

<script>

	import axios from "axios";
	import user from '../../utils/isLogin';
	import store from 'store2'
	import { Uploader } from 'vant';
	import qs from 'qs';
	export default{
		data(){
			return{
				texts:'',
				title:'',
				sels:require('../../assets/images/publish/Select.png'),
				upchenk:require('../../assets/images/publish/Unchecked.png'),
				ChoiceIndex:1,
				imgs:[],
				onoff: true ,
				typeId:'',
				value:'请选择模板',
				plateArr:[],
				platIndex :0,
				platName:'',
				platId:'',
				platCheck:false,
				draftId:'',
				isClick:true,
				CircleId:''
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			var draft = plus.webview.currentWebview();
			this.draftId = draft.draftId;
			//草稿箱再编辑
			axios({
			   method: 'post',
			   url: user.src + '/index/Article/resave_draft_box',
			   data:{
			   	articleId:draft.draftId
			   }
			})
			.then((res) => {
//				console.log(JSON.stringify(res))
				if(res.data.status == 200){
					this.title = res.data.data.article_title;
					this.texts = res.data.data.article_desc;
					var img = res.data.data.article_img;
					if(img!=''){
						var str = img.substr(0,img.length-1);
						var arr = str.split(',');
						this.imgs = arr;
					}else{
						var arr = img.split('');
						this.imgs = arr;
					}
				}
			})
			.catch((error)=> {
			    console.log(error);
			});
		   //板块接口数据
		   var userInfo = JSON.parse(window.localStorage.getItem( 'userInfo' ));
			if(userInfo == undefined || userInfo == null){
//				return;
			}else{
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				axios({
				   method: 'post',
				   url: user.src + '/index/plate/plate_list',
				   data:{
				   	uid:userId
				   }
				})
				.then((res) => {
					console.log(JSON.stringify(res))
					if(res.data.status == 200){
						this.plateArr = res.data.data;
						this.platId = res.data.data[0].cate_id;
						this.platName = res.data.data[0].cate_name;
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
				//获取圈子id值
				axios({
				   method: 'post',
				   url: user.src + '/index/article/get_circlename',
				   data:{
				   	userId:userId
				   }
				})
				.then((res) => {
					if(res.status == 200){
						this.CircleId = res.data.data[0].circle_circleId;
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
		 }
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }
		},
		components:{
			[Uploader.name]:Uploader 	
		},
		methods:{
			//上传图片
			onRead(file){		
				this.imgs.push(file.content)
			},
			//删除
			onResmove(i){
				this.imgs.splice(i, 1);  
			},
			//打开模板
			tabPlate(){
				this.platCheck = true;
			},
			//返回  有数据的话进入草稿箱
			tabReturn(){
				var {ChoiceIndex,texts,title,imgs,typeId} = this;
				var imgArr = imgs.join('|');
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				var data = {
					title: title,
					desc: texts,
					img: imgArr,
					userId: userId,
					type : typeId,
					articleId:this.draftId,
					status: 1,
					circleId:this.CircleId
				}
				if(texts == ''&& title == '' && imgs == ''){
					var publish = plus.webview.currentWebview();
					plus.webview.close(publish);	
					return;
				}else{
					axios.post(user.src + '/index/Article/creat_article' ,data)
					.then( (res)=> {
						console.log(JSON.stringify(res))
						if(res.data.status == 1069){
							var publish = plus.webview.currentWebview();
							plus.webview.close(publish);
						}
						if(res.data.status == 200){
							var publish = plus.webview.currentWebview();
							plus.webview.close(publish);
						}
					})
					.catch((error)=> {  
					});
				}
			},
			//实名
			handleRale(){
				this.ChoiceIndex = 1;
			},
			//匿名
			handleAnonymous(){
				this.ChoiceIndex = 2;
			},
			//发表
			handleSubmit(){
				var {ChoiceIndex,texts,title,imgs,typeId} = this;
				var imgArr = imgs.join('|');
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				if(title == ''){
					plus.nativeUI.toast('请输入标题~');
					return;
				}else if(texts == ''){
					plus.nativeUI.toast('请输入内容~');
					return;
				}else if(ChoiceIndex == 1 && typeId == ''){
				 	plus.nativeUI.toast('请选择板块~');
				 	return;
				}
				plus.nativeUI.showWaiting( "发表中，请稍后..." );
				var data = {
					title: title,
					desc: texts,
					img: imgArr,
					userId: userId,
					type: typeId,
					articleId:this.draftId,
					status: 2,
					circleId:this.CircleId
				}
				axios.post(user.src + '/index/Article/creat_article' ,data)
				.then((res)=> {
					if(res.data.status == 1069){
						plus.nativeUI.closeWaiting();
						plus.nativeUI.toast(res.data.mesg);
					}
					plus.webview.getWebviewById('home').reload();
					if(res.data.status == 200){
						setTimeout(function(){
							plus.nativeUI.closeWaiting();
							var publish = plus.webview.getWebviewById('publish');
							plus.webview.close(publish);	
						},2000)						
					}
				})
				.catch((error)=> {
				   
				});
			},
			//板块选择
			handlePlate (index,id,name){	
				this.platName = name;
				this.platId = id;
				this.platIndex = index;
			},
			//关闭模块
			onClickReturn(){
				this.platCheck = false;
			},
			//确定选择
			onDetermine(){
				this.typeId = this.platId;
				this.value = this.platName;
				this.platCheck = false;
			}
		}
	}
</script>

<style lang="less">
	html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
		/*box-shadow: 0px 0px 8px 1px #999;*/
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;	
		display:flex;
		justify-content: space-between;
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			color: #fff;
			font-size: 28px;
			text-align: center;
			text-indent: 50px;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.publish-center{
		padding: 92px 26px 0;
		background: #fff;
		.publish-title{
			height: 70px;
			border-bottom: 1px solid #ededed;
			display: flex;
			justify-content: space-between;
			h1{
				width: 104px;
				height: 70px;
				line-height: 70px;
				text-align: center;
				font-size: 32px;
				color: #9c9c9c;
			}
			input{
				border: 0;
				width: 100%;
				padding-left: 20px;
				height: 70px;
				line-height: 70px;
				font-size: 30px;
				outline: none;
			}
			span{
				margin-top: 33px;
				color: #9c9c9c;
				font-size: 18px;
			}
		}
		.publish-text{
			position: relative;
			padding: 40px 20px 0;
			height: 240px;	
			textarea{
				width: 100%;
				height: 100%;
				border: 0;
				font-size: 26px;
				line-height: 36px;
				resize:none;
				outline: none;
			}
			span{
				position: absolute;
				right: 0;
				bottom: 0;
				color: #9c9c9c;
				font-size: 18px;
			}
		}
		.publish-upload{
			overflow: hidden;
			padding-left: 25px;
			padding-top: 11px;
			padding-bottom: 100px;
			ul{
				float: left;
				overflow: hidden;
				li{
					position: relative;
					width: 148px;
					height: 146px;
					float: left;
					margin-right: 10px;
					margin-bottom: 10px;
					span{
						position: absolute;
						right: 0;
						top: 0;
						width: 30px;
						height: 30px;
						background: #000000;
						color: #FFFFFF;
						border-radius: 50%;
						line-height: 30px;
						text-align: center;
						font-size: 22px;
						text-indent: 2px;
					}
					img{
						width: 100%;
						height: 100%;
						border: 0;
					}
				}
				li:nth-child(4n){
					margin-right: 0;
				}
			}
			.uploader{
				float: left;
				width: 148px;
				height: 146px;
				position: relative;
				/*input{
					width: 148px;
					height: 146px;
					position: absolute;
	            left: 0px;
	            top: 0px;
	            opacity: 0;
	            -ms-filter: 'alpha(opacity=0)';
				}*/
				img{
					width: 100%;
					height: 100%;
					border: 0;
				}
			}
		}
		.publish-radio{
			height: 60px;
			padding-left: 25px;
			display: flex;
			justify-content: space-between;
			.radio > div{
				height: 60px;
				margin-right:40px ;
				float: left;
				img{
					width: 26px;
					height: 26px;
					margin-top: 5px;
					margin-right: 10px;
					float: left;
				}
				span{
					font-size: 26px;
					color: #575757;
					float: left;
				}
			}
			span{
				font-size: 26px;
				color: #c1c1c1;
			}
		}
	}
	
	.publish-footer{
		display: block;
		height: 140px;
		background: #fff;
		margin-top: 20px;
		padding-left: 50px;
		padding-right: 26px;		
		display: flex;
		align-items: center;
		justify-content: space-between;
		div{
			img{
				width: 34px;
				height: 34px;
				float: left;
			}
			p{
				font-size: 28px;
				line-height: 28px;
				color: #000;
				float: left;
				margin-top: 4px;
				margin-left: 27px;
			}
		}
		img{
			width: 16px;
			height: 26px;
		}
	}

	.publisModular{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top:0;
		background: #FFFFFF;
		.plate-con{
			padding: 30px 25px 0;
			p{
				font-size: 28px;
				margin-bottom: 38px;
			}
			ul{
				width: 100%;
				li{
					float: left;
					width: 138px;
					height: 48px;
					text-align: center;
					border: 1px solid #ebebeb;
					font-size: 26px;
					line-height: 50px;
					margin-bottom: 30px;
					border-radius: 50px;
					margin-right: 32px;
				}
				li:nth-child(4n){
					margin-right: 0;
				}
				.active{
					background:@default-blue;
					color: #fff;
				}
			}
		}
	}
</style>